<template>
  <el-container class="container">
    <el-main>
      <el-row style="padding: 30px;">
        <el-col :span="12" :offset="6">
          <el-card class="card">
            <el-form
                v-model="form"
                ref="info"
                size="small"
                label-width="180px"
                label-position="left">
              <el-form-item label="时间段选择">
                <el-select v-model="form.time" placeholder="请选择">
                  <el-option
                      v-for="item in timeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="区域类型">
                <el-select v-model="form.areatype" placeholder="请选择">
                  <el-option
                      v-for="item in areaOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类别">
                <el-select v-model="form.type" placeholder="请选择">
                  <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="适用机型">
                  <el-input
                      v-model="form.apply"
                      type="primary"
                      placeholder="适用机型" />
              </el-form-item>
              <el-form-item label="单位">
                  <el-input
                      v-model="form.affiliation"
                      type="primary"
                      placeholder="所属单位" />
              </el-form-item>

              <el-form-item label="实案">
                <el-input type="textarea"
                          :autosize="{ minRows: 10}"
                          placeholder="请输入内容"
                          v-model="form.realcase" />
              </el-form-item>
              <el-form-item label="复盘反思">
                <el-input type="textarea"
                          :autosize="{ minRows: 10}"
                          placeholder="请输入内容"
                          v-model="form.reflection" />
              </el-form-item>
              <el-form-item label="上传文件">
                <el-upload
                    :auto-upload="false"
                    :file-list="fileList"
                    :on-change="handleSuccess"
                    action="">
                  <el-button slot="trigger" icon="el-icon-document-copy" type="primary" size="small">上传文件</el-button>
                  <el-button v-if="success" type="success" icon="el-icon-check" circle style="margin-left: 20px"></el-button>
                </el-upload>
              </el-form-item>
              <el-divider/>
              <el-form-item>
                <el-button
                    type="primary"
                    round
                    style="margin-right: 30%;margin-left: 0%"
                    @click="uploadCase">上传实案
                </el-button>
                <el-button @click="$router.push('/homepage')" round >返 回 首 页</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>

import {createCase} from "@/api/case";

export default {
  name: "Upload",
  data() {
    return {
      success:false,
      fileList:[],
      //基本信息界面的表格
      form:{
        uid:localStorage.getItem('uid'),
        affiliation:'',
        apply:'',
        realcase:'',
        process:'',
        reflection:'',
        time:4,//表示发生在2021-2025
        areatype:0,//在高原
        type:0,
      },
      timeOptions:[{
        value:0,
        label:'2000-2005'
      }, {
        value:1,
        label:'2006-2010'
      },{
        value:2,
        label:'2011-2015'
      },{
        value:3,
        label:'2016-2020'
      },{
        value:4,
        label:'2021-2025'
      }],
      areaOptions:[{
        value:0,
        label:'高原'
      },{
        value:1,
        label:'热带'
      },{
        value:2,
        label:'寒带'
      },{
        value:3,
        label:'温带'
      },{
        value:4,
        label:'沿海'
      },{
        value:5,
        label:'沙漠&隔壁'
      }],
      typeOptions:[{
        value:0,
        label:'筹措类'
      },{
        value:1,
        label:'供应类'
      },{
        value:2,
        label:'管理类'
      },{
        value:3,
        label:'修理类'
      },{
        value:4,
        label:'战备类'
      }]
    }
  },
  created() {

  },
  beforeCreate() {
    if(!localStorage.getItem('uid')){
      this.$message({
        message: '请先登录',
        type: 'warning'
      })
      this.$router.push("/")
    }
  },
  methods: {
    uploadCase(){
      let cases = this.form;
      createCase(cases).then((res)=>{
        if(res.state===true) {
          this.$message.success('上传成功!');
          this.$router.push('/homepage')
        }
      }).catch((e)=>{
        this.$message.error('出错!请稍后重试!');
      })
    },
    handleSuccess(res, file) {
      this.success=true;
    },
  }
}
</script>

<style>
.container{
  padding-bottom: 1.5%;
  margin: 10px;
  background: url(../assets/bg4.jpg);
  background-size: 100%,100%;
}
</style>